<!-- 房屋管理 -->
<template>
  <div>
    <div class="header">
      <div class="title">
        <div style="width: 12%; float: left">
		  <a-space direction="vertical" style="width: 100%; margin-left: 13px">
			<a-input-group compact>
			  <a-cascader
				v-model:value="value18"
				style="width: 100%"
				:options="options1"
				expand-trigger="hover" 
				placeholder="请选择行政区"
				changeOnSelect @change="onChange"
			  />
			</a-input-group>
		  </a-space>
        </div>
		<div style="width: 10%;float: left;margin-top: 15px;margin-left: 25px;"> 
				<a-form-item  name="role_type">
					<a-select v-model:value="role_type"  @change="achange" placeholder='请选择用户角色' >
						<a-select-option value="4">乡镇用户</a-select-option>
						<a-select-option value="3">区级用户</a-select-option>
						<a-select-option value="2">市级用户</a-select-option>
					</a-select>
					</a-form-item>
			  </div>
		<div style="width: 28%;float: left;margin-top: 15px;margin-left: 10px;"> 
				<a-space style="margin-left: 10px">
            <span>开始时间：</span>
            <a-date-picker v-model:value="startDate" :format="dateFormat" />
          </a-space>
          <a-space style="margin-left: 10px">
            <span>结束时间：</span>
            <a-date-picker v-model:value="endDate" :format="dateFormat" />
          </a-space>
			</div>
			
		<div style="width: 20%;float: left;margin-top: 15px;margin-left: 25px;margin-bottom: 15px;"> 
			  <a-input-search
			v-model:value="txtKeyWord"
			placeholder="请输入核查人员姓名进行查询"
			enter-button
			style="width: 100%"
			@search="searchBtn"
		  />
		  </div>
		 
			
			<div style="float: left;width: 8%;margin-top: 20px;margin-left: 15px;display: none">
				<a-space class="search-btn">
					<a-checkbox v-model:checked="checked" @change="getChecked()">66个重点村</a-checkbox>
				</a-space>
			</div>
	</div>
		<a-table style=""
		  :dataSource="tableData"
		  :columns="displayColumns"
		  :pagination="false"
		  :scroll="{ x: 1500, y: tableHeight }"
		  bordered
		  :loading="loading"
		>
		</a-table>
		<div class="pagination" style="float: right">
		  <a-pagination
			show-size-changer
			v-model:current="pageIndex"
			v-model:pageSize="pageSize"
			:total="total"
			@show-size-change="onShowSizeChange"
		  />
		</div>
		<VillageDetail
		v-model:vvvisible="visible"
		title="抽屉标题"
		:width="1500"
		:detailTableHeight="detailTableHeight"
		:vclosable="true"
		:vdestroyOnClose="true"
		:data="vvvvdetailData"
		:vvvvvdetailParams="detailParams"
		:vvvvcurrentTitle="currentTitle"
		@close="handleClose"
    />
		<!-- <BasicTable @register="registerTable">
			<template #id="{ record }"> </template>
		</BasicTable> -->
	
	</div>
   </div>
  </template>
  
  <script lang="ts" setup>
    import moment from 'moment';
  import dayjs from 'dayjs';
import { ref, reactive, toRefs, onMounted, onBeforeMount, computed, watch,h } from 'vue';
import { SearchOutlined } from '@ant-design/icons-vue';
import { getHcUserWorkStatic,getRegion  } from '/@/api/demo/system'; //统计工作进展
import { useUserStore } from '/@/store/modules/user';
import { iTableData, iTableColumns } from './types/table';
import { iParams } from './types/params';
import { useGlobSetting } from '/@/hooks/setting';
import VillageDetail from './component/detailDrawer.vue';
const userStore = useUserStore();
const globSetting = useGlobSetting();
const visible = ref(false); //房屋列表
let userInfo = ref<any>(null);
 let detailTableHeight = ref<number>(0); // 表格高度
  let tableHeight = ref<number>(0); // 表格高度
  let detailParams = ref({}); // 房屋列表详情参数
  let pageIndex = ref(1);
  let pageSize = ref(15);
  let options1 = ref<any[]>([]);
  const value18 = ref<string[]>([]);
  let txtKeyWord = ref<string>('');
  const role_type = ref<string[]>([]);
  const dateFormat = 'YYYY-MM-DD';
  const startDate = ref<any>(null); // 开始时间
  const endDate = ref<any>(null); // 结束时间
  const checked = ref(false);
	let total = ref(0);
	const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    width: {
      type: Number,
      default: 256,
    },
    detailTableHeight: {
      type: Number,
      default: 600,
    },
    hzfs: {
      type: String,
      default: '',
    },
    closable: {
      type: Boolean,
      default: true,
    },
    data: {
      type: Array,
      default: () => [],
    },
    detailParams: {
      type: Object,
      default: () => {},
    },
    currentXzqdmname: {
      type: String,
      default: '',
    },
    currentTitle: {
      type: String,
      default: '',
    },
    wscolsList: {
      type: Array,
      default: () => [{ wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }],
    },
    destroyOnClose: {
      type: Boolean,
      default: true,
    },
    onClose: {
      type: Function as PropType<() => void>,
      default: () => {},
    },
  });
  let data = reactive<{
    tableData: iTableData[];
	tableColumns: iTableColumns[];
	wscolsList: { wch: number }[];
	id: number | any;
	loading: Boolean;
	keyWorld: String;
	currentqx: string; // 当前行政区名称
    currentTitle: string;
    cityToken: string | any;
	startTime:string;
	endTime:string;
  }>({
	  // 表格数据
    tableData: [],
    tableColumns: [
      {
        title: '序号',
		  dataIndex: 'index',
		  key: 'index',
		  align: 'center',
		  width: 100,
		},
		{
		  title: '行政区名称',
		  dataIndex: 'xzq',
		  key: 'xzq',
		  align: 'center',
		  width: 120,
		},
		{
		  title: '街/乡镇',
		  dataIndex: 'town',
		  key: 'town',
		  align: 'center',
		  width: 100,
		},
		{
		  title: '核查人员姓名',
		  dataIndex: 'nickname',
		  key: 'townusercount',
		  align: 'center',
		  width: 100,
		},
		{
		  title: '用户角色',
		  dataIndex: 'role_type_name',
		  key: 'role_type_name',
		  align: 'center',
		  width: 100,
		},
		{
		  title: '核查栋数',
		  dataIndex: 'hccount',
		  key: 'hccount',
		  align: 'center',
		  width: 170,
		  customCell: (row, index, column) => {
          let style = 'cursor:pointer;text-decoration: underline; color: blue;';
          let isNoZero = row[column.key] !== 0 ? true : false;
			return {
            style: style,
            class: 'cell-hover',
            onClick: async () => {
              getDetailData(row, index, column, isNoZero);
            },
		 }
		},
	    }
	  ],
	  id: null,
	  loading: true,
	  keyWorld: '',
	  cityToken: '', // 判断是不是市区 110000 是北京市 展示搜索宽
	  currentqx: '', // 当前行政区名称
	  currentTitle: '', // 当前详情标题
	  wscolsList: [{ wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }],
	});
	// 表格的 ref Dom名称
	let { tableData, loading, currentqx, currentTitle } = toRefs(data);
	async function getData() {
	  const { role } = userInfo.value;
	  if (startDate.value == null) {
      let currentDate = moment().format('YYYY-MM-DD');
      const start: any = dayjs('2024-01-01');
      const end: any = dayjs(currentDate);
      startDate.value = start;
      endDate.value = end;
      getTime();
    }
	  let groupname = '';
	  if (role === 'City') {
		groupname = 'qxmc';
	  } else if (role === 'Area') {
		groupname = 'jzmc';
	  } else if (role === 'Street') {
		groupname = 'czmc';
	  }
	  let params: iParams = {
		groupname: groupname,
		pageIndex: pageIndex.value,
		pageSize: pageSize.value,
		txtKeyWord:txtKeyWord.value,
		role_type:role_type.value,
		startTime: moment(startDate.value.$d).format('YYYY-MM-DD'),
        endTime: moment(endDate.value.$d).format('YYYY-MM-DD'),
	    cked:checked.value
	  };
	 if(value18.value != undefined)
	  {
		params.xzqdm = value18.value[0];
		params.towndm = value18.value[1];
		params.villagedm = value18.value[2];
	  }
	  loading.value = true;
	  let res: any = await getHcUserWorkStatic(params);
	  console.log('@res--工作进入汇总表', res.items);
  
	  if (res || res.items.length > 0) {
		loading.value = false;
		data.tableData = [...res.items];
		total.value = res.total;
	  }
	}
  // 计算总数的方法
  function vtotal(arr: any, item: any) {
    let total = arr.reduce((pre: any, cur: any) => {
      return parseInt(pre) + parseInt(cur[item]);
    }, 0);
    return total;
  }	
  async function getRegionData() {
    let res: any = await getRegion();
    options1.value = res;
  }
  function onChange(value) {
		value18.value=value;
  };
	function getUserInfo() {
	  const userStore = useUserStore();
	  userInfo.value = userStore?.getUserInfo;
	}
    const emit = defineEmits(['close']);
  // 导出
  const getDetailData = async (
    row: any,
    index: number,
    column: any,
    isNoZero: boolean,
  ) => {
    if (isNoZero) {
      let params: any = {
        xzqdm: row.xzqdm,
		towndm:row.towndm,
		villagedm:row.villagedm,
		qaakey:row.number,
        ...props.detailParams,
      };
      detailParams.value = params;
	  if(row.town!=null && row.village!=null )
	  {
		currentTitle.value = row.xzq + '-' +row.town+'-'+row.village+"-"+row.nickname;
	  }else if(row.town!=null && row.village==null ){
      	currentTitle.value = row.xzq + '-' +row.town+"-"+row.nickname;
	  }else if(row.town==null && row.village==null ){
      	currentTitle.value = row.xzq+"-"+row.nickname;
	  }
      showDrawer();
    }
  };
    // 打开抽屉
	function showDrawer() {
    visible.value = true;
  }
  function handleClose() {
    visible.value = false;
  }

	function searchBtn() {
	  data.loading = true;
	  getData();
	}
    function getTime() {
    data.startTime = moment(startDate.value.$d).format('YYYY-MM-DD');
    data.endTime = moment(endDate.value.$d).format('YYYY-MM-DD');
    console.log('@查询参数 -- 开始时间', data.startTime);
    console.log('@查询参数 -- 结束时间', data.endTime);
  }
	
	const displayColumns = computed(() => {
	  const { role } = userInfo.value;
	  let arr: any[] = [];
	  if (role === 'City') {
		// qx
		arr = data.tableColumns.filter((item) => item.key !== 'jzmc' && item.key !== 'czmc');
		return arr;
	  } else if (role === 'Area') {
		// jz
		arr = data.tableColumns.filter((item) => item.key !== 'czmc' && item.key !== 'qxmc');
		return arr;
	  } else if (role === 'Street') {
		// cun
		arr = data.tableColumns.filter((item) => item.key !== 'jzmc' && item.key !== 'qxmc');
		console.log('@Aarr', arr);
		return arr;
	  } else {
		return data.tableColumns;
	  }
	});
	const getTableHeight = () => {
	  setTimeout(() => {
		detailTableHeight.value = window.innerHeight;
		tableHeight.value = window.innerHeight;
	  });
	};
	const onShowSizeChange = (pageIndex: number, pageSize: number) => {
    // antDesign  自动给  pageIndex 和 pageSize 赋值
    // pageIndex.value = pageIndex;
    // pageSize.value = pageSize;
    // console.log('@pageIndex,pageSize', pageIndex, pageSize);
  };
	watch(pageSize, () => {
	  console.log('pageSize', pageSize.value);
	  getData();
	});
	watch(pageIndex, () => {
	  console.log('current', pageIndex.value);
	  getData();
	});
	onBeforeMount(() => {
	  getUserInfo();
	});
	onMounted(() => {
	  console.log('******工作进展统计初始化******');
	  getRegionData();
	  getData();
	  getTableHeight();
	 // getTableData();
	});
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped lang="less">
	#map {
	  height: calc(100vh - 140px);
	}
  
	.x-houseMng-search {
	  z-index: 100;
	  margin: 6px;
	  position: absolute;
	}
  
	.root-house-mng-main {
	  margin: 6px;
	}
  
	.x-village-tabs {
	  //z-index: 100;
	  //position: absolute;
	  width: 60vw;
	  margin-top: 6px;
	  margin-left: 40px;
	  //background-color: rgba(34, 34, 34, 0.6);
	  :deep(.ant-form) {
		margin-top: 6px;
	  }
  
	  // :deep(.ant-form-item-label) > label {
	  //   color: white;
	  // }
	}
  </style>
  